<template>
	<view class="cate">
		<!-- 左侧的分类 -->
		<scroll-view class="cate-list">
			<view class="item" :class="{active:item.id==selectId}" v-for="(item,index) in cateOneList" @tap="changeSelect(item.id)">
				{{item.name}}
			</view>
		</scroll-view>
		<!-- 右侧的商品分类 -->
		<scroll-view class="cate-goods"></scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	onLoad(() => {
		getCateOneList()
	})

	//获取一级分类列表
	const cateOneList = ref([])
	async function getCateOneList() {
		let res = await uni.$post('/categoryListLevel', {
			"level": 1
		})
		if (res.code == 200) {
			cateOneList.value = res.result

			/**
			 * js数组的添加删除操作
			 * arr.unshift()  添加首位
			 * arr.shift()   从首位删除
			 * arr.push()   添加到末尾
			 *arr.pop()   末尾删除
			 * */
			cateOneList.value.unshift({
				id: 0,
				name: "全部"
			})
		}
		console.log(cateOneList.value)
	}
	
	const selectId=ref([])
	async function changeSelect(id){
		selectId.value=id
	}
</script>

<style>
	.cate>.cate-list {
		width: 180rpx;
		border: 1px solid red;
		background-color: #efefef;
		height: calc(100vh-97px);
		/* 微信效果 */
		height: 100vh;
	}

	.item {
		font-size: 12px;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
	}

	.active {
		background-color: #ff6700;
		color: #fff;
	}
</style>